<template>
  <div>
    <!-- 项目费用 star-->
    <a-row>
      <a-col :span="10">
        <a-descriptions class="title-point" :title="$t('all.autotext599')"></a-descriptions>
      </a-col>
      <a-col :span="14" align="right">
        <a-button type="primary" v-if=" $store.state.user.project.status!==3" @click="exportTap">{{ $t('all.autotext228') }}</a-button>
      </a-col>
    </a-row>
    <a-row class="cost-row">
      <a-col
        class="cost-col"
        :span="6"
        v-for="(item, i) in projectCost"
        :key="i"
      >
        <div class="cost-col-title">{{ item.allName }}</div>
        <div class="cost-col-num">{{ item.allNum }}</div>
        <div v-if="serviceCharge">
          <div class="cost-col-tab cost-col-space">{{ item.studyName }}:<span>{{ item.studyNum }}</span></div>
          <div class="cost-col-tab">{{ item.serviceName }}:<span>{{ item.serviceNum }}</span></div>
        </div>
      </a-col>
    </a-row>
    <!-- 项目费用 end-->
    <!-- 申请明细 star -->
    <a-descriptions class="title-point" :title="$t('all.autotext472')"></a-descriptions>
    <div class="table-page-search-wrappers">
      <a-form-model :model="queryParam" ref="formRef" layout="inline">
        <a-row :gutter="48">
          <a-col :md="6" :sm="24">
            <a-form-model-item :label="$t('all.autotext212')" prop="type">
              <a-select v-model="queryParam.type" allowClear>
                <a-select-option v-for="item in $const.SUBJECTANDREESA" :value="item.value" :key="item.value">
                  {{ item.desc }}
                </a-select-option>
              </a-select>
            </a-form-model-item>
          </a-col>
          <a-col :md="6" :sm="24">
            <a-form-model-item :label="$t('all.autotext112')" prop="status">
              <a-select v-model="queryParam.status" allowClear>
                <a-select-option v-for="item in $const.PAYMENT_STATUS" :value="item.value" :key="item.value">
                  {{ item.desc }}
                </a-select-option>
              </a-select>
            </a-form-model-item>
          </a-col>
          <a-col :md="6" :sm="24">
            <a-form-model-item :label="$t('all.autotext17')" prop="time">
              <a-range-picker v-model="timeArr" allowClear @change="changeCreateTime" />
            </a-form-model-item>
          </a-col>
          <a-col :md="4" :sm="24">
            <a-space>
              <a-button type="primary" @click="$refs.table.refresh(true)">{{ $t('all.autotext30') }}</a-button>
              <a-button @click="handleReast">{{ $t('all.autotext340') }}</a-button>
            </a-space>
          </a-col>
        </a-row>
      </a-form-model>
      <s-table
        ref="table"
        rowKey="id"
        :columns="columns"
        :data="loadData"
      >
        <!-- <template slot="createTime" slot-scope="text, record">
          {{ record.createTime | moment() }}
        </template> -->
      </s-table>
      <a-row class="apply-row">
        <a-col :span="12" class="apply-col">
          <a-descriptions :title="$t('all.autotext1045')" :column="2">
            <a-descriptions-item v-for="(item, i) in applyNum" :key="i" :label="item.name">
              {{ item.num }}
            </a-descriptions-item>
          </a-descriptions>
        </a-col>
        <a-col :span="12" class="apply-col">
          <a-row>
            <a-col
              :span="12"
              v-for="(item, i) in costNum"
              :key="i"
              class="apply-cost-col"
            >
              <div class="apply-cost-col-name">{{ item.name }}:</div>
              <div class="apply-cost-col-num">{{ item.num }}</div>
            </a-col>
          </a-row>
          <div class="apply-service" v-if="serviceCharge"><span>{{ $t('all.autotext382.1') }}：</span>{{ serviceCharge }}{{ serviceChargeType === 1 ? $t('all.autotext382.2') : '%' }}</div>
        </a-col>
      </a-row>
    </div>
    <!-- 申请明细 end -->
    <!-- 付款明细、项目预算、资金流水 -->
    <div style="margin-top:30px;">
      <a-tabs :activeKey="isFinanceDetailSkip" size="large" @change="handleTabsChange">
        <a-tab-pane key="1" :tab="$t('all.autotext1004')" >
          <keep-alive>
            <PaymentList :datailId="queryParam.proId" :total="projectCost[0].studyNum" />
          </keep-alive>
        </a-tab-pane>
        <a-tab-pane key="3" :tab="$t('all.autotext402')" >
          <keep-alive>
            <BudgetList
              :serviceCharge="Boolean(serviceCharge)"
              :budget-amt="dataInfo.budget"
              :datailId="queryParam.proId"
              @handleOk="handBudget"
            />
          </keep-alive>
        </a-tab-pane>
        <a-tab-pane key="2" :tab="$t('all.autotext290')" >
          <keep-alive>
            <FinanceList :datailId="queryParam.proId" />
          </keep-alive>
        </a-tab-pane>
      </a-tabs>
    </div>
    <export-com :visible.sync="exVisible" />
  </div>
</template>
<script>
import moment from 'moment'
import { getPaymentList } from '@/api/project/finance'
// import { buildPaginationObj } from '@/components/Table'
import PaymentList from '@/views/overview/detail/treasurer/components/payment/PaymentList'
import FinanceList from '@/views/overview/detail/treasurer/components/finance/FinanceList'
import BudgetList from '@/views/overview/detail/treasurer/components/budget/budgetList'
import exportCom from './export'

export default {
  components: {
    PaymentList,
    FinanceList,
    BudgetList,
    exportCom
  },
  props: ['detailsInfo'],
  data () {
    return {
      projectCost: [
        {
          allName: this.$t('all.autotext151'),
          allNum: '0.00',
          studyName: this.$t('all.autotext1226'),
          studyNum: '0.00',
          serviceName: this.$t('all.autotext449'),
          serviceNum: '0.00'
        },
        {
          allName: this.$t('all.autotext343'),
          allNum: '0.00',
          studyName: this.$t('all.autotext1406'),
          studyNum: '0.00',
          serviceName: this.$t('all.autotext672'),
          serviceNum: '0.00'
        },
        {
          allName: this.$t('all.autotext471'),
          allNum: '0.00',
          studyName: this.$t('all.autotext849'),
          studyNum: '0.00',
          serviceName: this.$t('all.autotext139'),
          serviceNum: '0.00'
        }
        // {
        //   allName: this.$t('all.autotext557'),
        //   allNum: '0.00',
        //   studyName: this.$t('all.autotext506'),
        //   studyNum: '0.00',
        //   serviceName: this.$t('all.autotext804'),
        //   serviceNum: '0.00'
        // }
      ],
      timeArr: [],
      queryParam: {
        proId: '',
        type: '',
        status: '',
        bTime: '',
        eTime: ''
      },
      columns: [
        {
          title: this.$t('all.autotext1156'),
          dataIndex: 'applyNo'
        },
        {
          title: this.$t('all.autotext229'),
          dataIndex: 'type'
        },
        {
          title: this.$t('all.autotext1521'),
          dataIndex: 'createAccount',
          customRender: (text, record) => {
            return `${record.createRoleName} - ${record.createAccount}`
          }
        },
        {
          title: this.$t('all.autotext597'),
          dataIndex: 'bankNo',
          customRender: (text, record) => {
            return `${record.pstRoleName} - ${record.ptsNo}`
          }
        },
        {
          title: this.$t('all.autotext867'),
          dataIndex: 'totalAmount'
        },
        {
          title: this.$t('all.autotext244'),
          dataIndex: 'createTime',
          customRender: (text, record) => {
            return moment(text).format('YYYY-MM-DD HH:mm:ss')
          }
        },
        {
          title: this.$t('all.autotext1466'),
          dataIndex: 'now'
        }
      ],
      dataInfo: {},
      loadData: parameter => {
        return getPaymentList(Object.assign(parameter, this.queryParam)).then(res => {
          this.dataInfo = res
          // 项目费用
          this.projectCost[0].allNum = res.budget.toFixed(2)
          this.projectCost[0].studyNum = Number(res.studyBudgetAmount).toFixed(2)
          this.projectCost[0].serviceNum = Number(res.serverBudgetAmount).toFixed(2)
          this.projectCost[1].allNum = res.paid.toFixed(2)
          this.projectCost[1].studyNum = Number(res.studyPaidAmount).toFixed(2)
          this.projectCost[1].serviceNum = Number(res.serverPaidAmount).toFixed(2)
          this.projectCost[2].allNum = (res.budget - res.paid).toFixed(2)
          this.projectCost[2].studyNum = (res.studyBudgetAmount - res.studyPaidAmount).toFixed(2)
          this.projectCost[2].serviceNum = (res.serverBudgetAmount - res.serverPaidAmount).toFixed(2)
          this.projectCost[3].allNum = (res.breakAwayFromPrice + res.serverBreakAwayFromPrice).toFixed(2)
          this.projectCost[3].studyNum = res.breakAwayFromPrice.toFixed(2)
          this.projectCost[3].serviceNum = res.serverBreakAwayFromPrice.toFixed(2)
          // 申请次数
          this.applyNum[0].num = res.recordApplyTotalCount || 0
          this.applyNum[1].num = res.recordApplyTotalCount31 || 0
          this.applyNum[2].num = res.recordApplyTotalCount51 || 0
          this.applyNum[3].num = res.recordApplyTotalCount1 || 0
          this.applyNum[4].num = res.recordApplyTotalCount50 || 0
          this.applyNum[5].num = res.recordApplyTotalCount11 || 0
          this.costNum[0].num = (res.recordApplyTotal51 || 0).toFixed(2)
          this.costNum[1].num = (res.recordApplyTotal50 || 0).toFixed(2)
          return res.page
        })
      },
      applyNum: [
        {
          name: this.$t('all.autotext410'),
          num: 0
        },
        {
          name: this.$t('all.autotext759'),
          num: 0
        },
        {
          name: this.$t('all.autotext659'),
          num: 0
        },
        {
          name: this.$t('all.autotext13'),
          num: 0
        },
        {
          name: this.$t('all.autotext1097'),
          num: 0
        },
        {
          name: this.$t('all.autotext180'),
          num: 0
        }
      ],
      costNum: [
        {
          name: this.$t('all.autotext1016'),
          num: '0.00'
        },
        {
          name: this.$t('all.autotext1398'),
          num: '0.00'
        }
      ],
      isFinanceDetailSkip: '1',
      exVisible: false
    }
  },
  computed: {
    serviceCharge () {
      const { serviceCharge, serviceChargePercent } = this.detailsInfo
      return serviceCharge || serviceChargePercent || 0
    },
    /**
     * 服务费用类型
     * @return {number} 1 - 额定费用 2 - 付款金额比例 0 - 无需服务费
     */
    serviceChargeType () {
      const { serviceCharge, serviceChargePercent } = this.detailsInfo
      if (serviceCharge) return 1
      if (serviceChargePercent) return 2
      return 0
    }
  },
  created () {
    const pd = localStorage.getItem('CURRENT_PROID')
    if (pd) {
      this.queryParam.proId = parseInt(pd)
    }
  },
  mounted () {
    if (this.$store.state.app.financeKey) {
      this.isFinanceDetailSkip = this.$store.state.app.financeKey
    }
    // if (this.$auth('PROJECT.PROJECT_PAY_V2')) {
    //   this.isFinanceDetailSkip = '1'
    // } else if (this.$auth('PROJECT.PROJECT_INCOME_V2')) {
    //   this.isFinanceDetailSkip = '2'
    // } else if (this.$auth('PROJECT.PROJECT_BUDGET_V2')) {
    //   this.isFinanceDetailSkip = '3'
    // }
  },
  methods: {
    changeCreateTime (date, dateString) {
      this.queryParam.bTime = dateString[0]
      this.queryParam.eTime = dateString[1]
    },
    // 重置
    handleReast () {
      this.timeArr = []
      this.queryParam.bTime = ''
      this.queryParam.eTime = ''
      this.$refs.formRef.resetFields()
      this.$refs.table.refresh(true)
    },
    // 导出结算单
    exportTap () {
      this.exVisible = true
    },
    handBudget () {
      this.$refs.table.refresh(true)
    },
    // tab栏切换
    handleTabsChange (key) {
      this.isFinanceDetailSkip = key
      this.$store.commit('changeFinanceKey', key)
    }
  }
}
</script>
<style lang="less" scoped>
.title-point {
  padding-left: 20px;
  position: relative;
  &::before {
    content: '';
    display: block;
    width: 4px;
    height: 20px;
    background: #3D92FF;
    position: absolute;
    left: 0;
    top: 2px;
  }
}
.cost-row {
  background: #F6F9FB;
  padding: 20px 0;
  margin-bottom: 30px;
  .cost-col {
    border-right: 1px solid #CCD4E1;
    padding: 4px 20px;
    &:last-child {
      border: none;
    }
    .cost-col-title{
      font-size: 16px;
      color: #4D5C6F;
    }
    .cost-col-num{
      font-size: 24px;
      color: #0F121B;
      font-weight: bold;
    }
    .cost-col-tab{
      font-size: 16px;
      color: #8193B1;
      margin-top: 4px;
      span {
        color: #0F121B;
        margin-left: 8px;
      }
    }
    .cost-col-space {
      margin-top: 24px;
    }
  }
}
.apply-row {
  border: 1px solid #E5EBF3;
  margin-top: 20px;
  .apply-col {
    padding: 20px;
    border-right: 1px solid #E5EBF3;
    &:last-child {
      border: none;
    }
    /deep/.ant-descriptions-item>span {
      font-size: 16px;
    }
    /deep/.ant-descriptions-item .ant-descriptions-item-colon {
      color: #8193B1;
    }
    .apply-cost-col {
      padding-top:24px;
      .apply-cost-col-name {
        color: #8193B1;
        font-size: 16px;
      }
      .apply-cost-col-num {
        font-size: 24px;
        // font-weight: bold;
      }
    }
    .apply-service {
      font-size: 16px;
      margin-top:30px;
      span {
        color: #8193B1;
      }
    }
  }
}
</style>
